<template>
	<view class="search-box">
		<TopHead :title="'搜索'"></TopHead>
		<view class="conbox">
			<view class="searchBox">
				<uni-icons type="search" color="#5d4529;" class="searchIcon" size="26"></uni-icons>
				<!-- <text>搜索商品或者服务名称</text> -->
				<input class="uni-input" v-model="tag" placeholder="搜索商品或者服务名称" />
				<text class="btn" @click="queryData()">搜索</text>
			</view>
			<view class="history">
				<text class="his-left"></text>
				<text class="his-text">历史搜索</text>
			</view>
			<view class="history2">
				<text v-for="item in queryHistory" :key="item" @click="addQueryData(item)">{{item}}</text>

			</view>
			<goods-list :list="list"></goods-list>

		</view>
	</view>
</template>

<script>
	import TopHead from '../../components/topHead/topHead.vue';
	import GoodsList from '../../components/basics/goodsList.vue';
	export default {
		components: {
			TopHead,
			GoodsList
		},
		data() {
			return {
				goodsList: [],
				latitude: 0, // 纬度
				longitude: 0, // 经度
				page: 1,
				pageSize: 10, // 
				total: 0, // 总数
				list: [], // 列表
				tag: '', // 搜索框
				queryHistory: [],
				productType:'', //
			}
		},
		onLoad(option) {
			if (option.productType) {
				this.productType = option.productType
				console.log(this.productType)
			}
			this.toLocation()
		},
		onShow() {
			this.page = 1
			this.total = 0
			this.list = []
			this.queryHistory = uni.getStorageSync('queryHistory');
			if (this.queryHistory == undefined || this.queryHistory.length == 0) {
				this.queryHistory = [];
			}
			this.initData()
		},
		onReachBottom() {
			// 触底分页
			console.log('触底')
			if (this.total > this.list.length) {
				this.page = parseInt(this.page) + 1

				this.$nextTick(() => {
					this.initData()
				})
			}
		},
		methods: {
			addQueryData(val) {
				console.log("val", val)
				this.tag = val;
				
				this.queryData()
			},
			queryData() {
				this.productType = ''
				if (this.queryHistory.length > 2) {
					this.queryHistory.shift();
				}
				console.log("this.queryHistory", this.queryHistory.length, this.queryHistory, this.tag)
				this.queryHistory.push(this.tag);
				uni.setStorageSync('queryHistory', this.queryHistory);
				this.list = []
				this.initData()
			},
			// 获取经纬度
			toLocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						const latitude = res.latitude; // 纬度
						const longitude = res.longitude; // 经度
						_this.latitude = latitude
						_this.longitude = longitude
						console.log(res)
						// _this.initData()
					}
				});
			},
			// 数据请求示例
			initData() {
				let _this = this;
				let userId = uni.getStorageSync('id')
				let data = {
					page: _this.page,
					pageSize: _this.pageSize,
					longitude: _this.longitude,
					latitude: _this.latitude,
					tag: _this.tag,
					status: 1,
					productType: _this.productType
				}
				console.log(data)
				_this.$http.fetchData({
					url: '/wechatApplet/customer/store/',
					method: 'GET',
					data: data,
					success(res) {
						console.log("res", res);
						// uni.showToast({
						// 	title: res.message,
						// 	icon: 'none'
						// });
						_this.list = [..._this.list, ...res.data.list]
						this.total = res.data.total

					}
				})
			},
			// dianhua
			phoneCall(item) {
				uni.makePhoneCall({
					phoneNumber: '023-62433333' //仅为示例
				});
			},


		}
	}
</script>

<style scoped>
	.search-box {
		background: #f3f3f3;
		height: 100%;
	}

	.headBox {
		font-size: 36rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		text-align: center;
		color: #232323;
		padding-top: 88rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 112rpx;
		background: linear-gradient(89deg, #f9d7a6 1%, #ffdc95 100%);
	}

	.headBox .wzText {
		line-height: 56rpx;
	}

	.searchBox {
		height: 80rpx;
		line-height: 80rpx;
		background: #fff;
		border-radius: 40rpx;
		box-sizing: border-box;
		padding-left: 24rpx;
		position: relative;
		overflow: hidden;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		margin-top: 30rpx;
		color: #5d4529;
		display: flex;
	}

	.searchBox .searchIcon {
		vertical-align: middle;
		flex-shrink: 0;
	}

	.uni-input {
		flex: 1;
		height: 80rpx;
	}

	.searchBox .btn {
		flex-shrink: 0;
		width: 144rpx;
		height: 80rpx;
		background: #d97e35;
		/* position: absolute;
		right: 0;
		top: 0;
		bottom: 0; */
		border-top-left-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;

	}

	.conbox {
		padding: 30rpx;
		padding-top: 166rpx;
	}

	.history {
		margin-top: 38rpx;
	}

	.history .his-left {
		display: inline-block;
		width: 8rpx;
		height: 36rpx;
		background: #e47917;
		border-radius: 4rpx;
		vertical-align: middle;
		margin-right: 15rpx;
	}

	.history .his-text {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #e47917;
	}

	.history2 {
		padding: 20rpx 0;
	}

	.history2 text {
		display: inline-block;
		text-align: center;
		line-height: 78rpx;
		padding: 0 72rpx;
		margin-right: 26rpx;
		background: #ededed;
		border: 2rpx solid rgba(189, 189, 189, 0.20);
		border-radius: 42rpx;
		margin-bottom: 20rpx;
	}

	.history2 text:nth-child(3n) {
		margin-right: 0;
	}
</style>